<template>
  <div class="home">
    <van-nav-bar
      title="搜索"
      class="page-nav-bar"
      fixed

    >
      <template #title>
        <van-button class="cearch-btn" icon="search" type="primary" to = '/Search'>搜索</van-button>
      </template>
    </van-nav-bar>
    <van-tabs v-model="active" swipeable animated class="home-tab" sticky offset-top = "1.2rem">
      <van-tab v-for="item in chalass" :key="item.id" :title="item.name">
        <article-list :channalId = "item.id"/>
      </van-tab>
      <template #nav-right>
        <div class="placehiolder-box"></div>
        <div class="right-menu" @click="HamburgShell = true">
          <i class="iconfont toutiao-gengduo"></i>
        </div>
      </template>
    </van-tabs>
    <van-popup
      v-model="HamburgShell"
      position="bottom"
      closeable
      close-icon-position="top-left"
      :style="{ height: '82%' }"
      class="editPopup"
    >
        <tcPopup  :active = "active" :chalass = "chalass" @MySelect = "MySelect" @MyClick= "active--"/>
    </van-popup>
  </div>
</template>

<script>
import { getUserSelfChannels } from '@/api/user.js'
import ArticleList from './components/ArticleList.vue'
import tcPopup from './components/tcPopup.vue'
import { getStorage } from '@/utils/storage.js'
export default {
  data () {
    return {
      active: 0,
      chalass: [],
      HamburgShell: false
    }
  },
  components: {
    ArticleList,
    tcPopup
  },
  created () {
    this.loginUrl()
  },

  methods: {
    async loginUrl () {
      // 调用本地数据
      const Storage = getStorage('MY-CHANNELS')
      if (!this.$store.state.user && Storage) {
        this.chalass = Storage
        return false
      }
      // 获取网络数据
      try {
        const res = await getUserSelfChannels()
        this.chalass = res.channels
        console.log(res)
      } catch (err) {
        console.log(err)
      }
    },
    MySelect (e) {
      this.active = e
      this.HamburgShell = false
    }
  }
}
</script>

<style scoped lang = 'less'>
  .home {
    padding-top: 80px;
    .cearch-btn {
      width: 555px;
      height: 64px;
      background: rgba(255, 255, 255, .2);
      border: none;
      border-radius: 32px;
    }
    /deep/.van-nav-bar__title {
      max-width: unset;
    }
    .van-icon-search {
      color: #fff;
    }
    /deep/.home-tab {
      .van-tab {
        min-width: 200px;
        border-right: 1px solid #EDEFF3;
        border-bottom: 1px solid #EDEFF3;
        height: 82px;
        .van-tab__text {
          font-size: 28px;
          color: #777;
        }
      }
      .van-tats__wrap {
        height: 82px;
        border-bottom: 1px solid #EDEFF3;
      }
      .van-tab--active {
        .van-tab__text {
          font-size: 30px;
          color: #333;
        }
      }
      .van-tabs__line {
        width: 31px;
        height: 6px;
        background: #3296FA;
        border-radius: 3px;
        bottom: 8px;
      }
      .van-tabs__nav--line {
        padding: 0;
      }
      .right-menu {
        width: 66px;
        height: 82px;
        background: #fff;
        position: fixed;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        i {
          font-size: 40px;
        }
        &::before {
          content: '';
          width: 1px;
          height: 58px;
          position: absolute;
          left: 0;
          top: 12px;
          background-image: url(~@/assets/images/gradient-gray-line.png);
          background-size: 100% 100%;
        }
      }
      .placehiolder-box {
        width: 66px;
        flex-shrink: 0;
      }
    }
      .editPopup {
        padding-top: 100px;
      }
  }
</style>
